import React from 'react'
import { Menu  } from 'antd'
import {PieChartOutlined,AntDesignOutlined,SmileOutlined,BankOutlined} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import service from '../../service'
import {getLoginToken} from '../../common/Auth.js'
const { SubMenu } = Menu
export default function  MenuBar(props){
  let to = useNavigate()
  const [current, setCurrent] = React.useState('')
  const [UserAllPerOne, setUserAllPerOne] = React.useState([])
  const [UserAllPerTow, setUserAllPerTow] = React.useState([])
  let icon = [<BankOutlined/>,<AntDesignOutlined/>,<PieChartOutlined/>]
  React.useEffect(()=>{
    service.loadUserAllPer({key:getLoginToken()}).then((res)=>{
      setUserAllPerOne(res.data.filter((item,index)=>{
        return item.code==='0'
      }))
      setUserAllPerTow(res.data.filter(item=>item.code!=='0'))
    })
  },[])
  let handleMenuClick=(e)=>{
    setCurrent(e.key)
    if(e.key!=='/home/personal_information'){
      to(e.key)
    }else{
      props.on()
    }
  }
  return (
    <div className='aside-menu-bar'>
      <Menu 
        onClick={handleMenuClick}
        selectedKeys={[current]}
        mode="inline"
      >
        {
          UserAllPerOne.map((item)=>{
            item.icon = icon[item.sort]
            let UserAllPerTowChild = UserAllPerTow.filter(item1=>item.url===item1.code)
            return (
              <SubMenu
                icon={item.icon}
                title={
                  <span>
                    {item.des}
                  </span>
                }
                key={item.key}
              >
                {
                  UserAllPerTowChild.map((item2)=>{
                    return <Menu.Item key={item2.url}>{item2.des}</Menu.Item>
                  })
                }
              </SubMenu>
            )
          })
        }
        <SubMenu
          icon={<SmileOutlined/>}
          title={
            <span>
              个人中心
            </span>
          }
          key="4"
        >
          <Menu.Item key='/home/personal_information'>个人信息</Menu.Item>
          <Menu.Item key='/home/personal_set/'>设置中心</Menu.Item>
        </SubMenu>
      </Menu>
    </div>
  ) 
}
